<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>播放器</title>
	<link rel="stylesheet" href="../bfq/图标库/iconfont.css">
	<style>
		* {
			text-align: center;
			padding: 0px;
			margin: 0px;
			box-sizing: border-box;
			color: white;
			flex-wrap: nowrap;
		}



		input:focus {
			outline: none;
		}

		body,
		html {
			width: 100%;
			height: 100%;
		}

		.player {
			background-color: rgba(0, 0, 0, 0.8);
			display: flex;
			width: 100vw;
			height: 100vh;
			justify-content: space-between;
		}

		.light {
			opacity: 1 !important;
			filter: brightness(120%);

		}

		.player-left {
			display: flex;
			flex-direction: column;
			overflow: scroll;


		}

		.player-left::-webkit-scrollbar {
			display: none;
		}

		.player-left-zone {
			display: flex;
			height: 10vw;
			align-items: center;
			opacity: 0.8;
		}

		.player-left-zone>div:not(.zone-sign) {
			line-height: 10vw;
			font-size: 2vw;
			width: 10vw;
			height: inherit;
		}

		.zone-text-active {
			background: radial-gradient(farthest-corner at left,
					black 50%,
					red 100%);
		}


		.zone-FM {
			font-weight: bold;
			font-size: 3vw !important;
			border-left: 1px solid black;
			border-right: 1px solid black;
		}

		.icon-shengyin2 {
			background-color: grey;
			font-size: 6vw !important;
			border-radius: 5vw;
			color:red!important;
		}

		.zone-range {
			flex: 1 1 auto;
			width: auto !important;
			display: flex;
			align-items: center;

		}

		.zone-input {
			height: 2vw;
			appearance: none;
			border-radius: 20vw;
			width: 50vw;
			background:linear-gradient(90deg,red,yellow,white) no-repeat white;
			background-size: 1% 100%;
		}

		.zone-input::-webkit-slider-thumb {
			appearance: none;
			height: 4vw;
			width: 4vw;
			border-radius: 5vw;
			background-color: white;
			cursor: pointer;
		}

		.zone-sign {
			width: 5vw;
			height: 5vw;
			line-height: 5vw;
			background-color: red;
			margin-left: 2vw;
			border-radius: 5vw;
			display: none;
		}

		.player-right {
			height: 100vh;
			width: 10vw;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 2vw;
			border: 2px solid rgb(161, 161, 161);
		}

		.icon-jiantoucu {
			font-size: 7vw;
			color: rgb(206, 206, 206) !important;
		}
	</style>
</head>

<body>
	<div class="player">
		<div class="player-left">

			<div class="player-left-zone">
				<div class="zone-text">Zone&nbsp;1</div>
				<div class="zone-FM">FM</div>
				<div class="zone-icon">
					<span class="iconfont icon-shengyin2"></span>
				</div>
				<div class="zone-range">
					<input value="1" class="zone-input" type="range" min="1" max="100">
					<div class="zone-sign">1</div>
				</div>



			</div>
			<div class="player-left-zone">
				<div class="zone-text">Zone&nbsp;2</div>
				<div class="zone-FM">FM</div>
				<div class="zone-icon">
					<span class="iconfont icon-shengyin2"></span>
				</div>
				<div class="zone-range">
					<input value="1" class="zone-input" type="range" min="1" max="100">
					<div class="zone-sign">1</div>
				</div>
			</div>
			<div class="player-left-zone">
				<div class="zone-text">Zone&nbsp;3</div>
				<div class="zone-FM">FM</div>
				<div class="zone-icon">
					<span class="iconfont icon-shengyin2"></span>
				</div>
				<div class="zone-range">
					<input value="1" class="zone-input" type="range" min="1" max="100">
					<div class="zone-sign">1</div>
				</div>
			</div>
			<div class="player-left-zone">
				<div class="zone-text">Zone&nbsp;4</div>
				<div class="zone-FM">FM</div>
				<div class="zone-icon">
					<span class="iconfont icon-shengyin2"></span>
				</div>
				<div class="zone-range">
					<input value="1" class="zone-input" type="range" min="1" max="100">
					<div class="zone-sign">1</div>
				</div>
			</div>

		</div>

		<div class="player-right">
			<div class="iconfont icon-jiantoucu"></div>
		</div>
	</div>

</body>
<script>
	const plz = document.querySelectorAll(".player-left-zone");//player-left-zone
	const inputs = document.querySelectorAll(".zone-input");
	var i = 0;
	var last = null;
	for (var obj of plz) {
		obj.order = i;
		obj.onclick = styleChangeZone;
		obj.oninput = styleChangeZone;
		function styleChangeZone() {
			if (last == null) {
				this.classList.add("light")
				this.firstElementChild.classList.add("zone-text-active")
				this.lastElementChild.lastElementChild.style.display="block";
				last = this.order;
				
			}
			if (this.order != last) {//当前元素和之前的不同
				this.classList.add("light")
				this.firstElementChild.classList.add("zone-text-active")
				this.lastElementChild.lastElementChild.style.display="block";
				plz[last].classList.remove("light")
				plz[last].firstElementChild.classList.remove("zone-text-active")
				plz[last].lastElementChild.lastElementChild.style.display="none";
				last = this.order;
			
			}

		}
		i = i + 1;
	}
	inputs.forEach((obj)=>{
		obj.oninput=function(){
			this.nextElementSibling.innerText=this.value;
		}
		obj.addEventListener("input",changecolor,false);
	
	})
	function changecolor(){
		var durp=parseInt(this.value);//取出值
		//使用渐变色就能完成
		this.style.backgroundSize=`${durp}%,100%`
		
	}



</script>

</html>